<template>
  <el-dialog title="编辑" :visible.sync="visiable" width="60%" :before-close="handleClose">
    <el-form :rules="rules" ref="formData" :model="formData" label-width="100px"  >
      <el-form-item label="MV名称:" prop="mvName">
        <el-input v-model="formData.mvName" ></el-input>
      </el-form-item>
      <el-form-item label="封面图" prop="mvImg">
        <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="uploadMainImg">
          <img v-if="formData.mvImg" :src="formData.mvImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="地区:" prop="regionId">
        <el-select v-model="formData.regionId" filterable placeholder="请选择">
          <el-option
            v-for="item in allRegionList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型:" prop="typeId">
        <el-select v-model="formData.typeId" filterable placeholder="请选择">
          <el-option
            v-for="item in allTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发行日期:" prop="releaseTime">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          type="date"
          placeholder="请选择日期"
          v-model="formData.releaseTime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="是否发布" prop="status">
        <el-radio-group v-model="formData.status" >
          <el-radio :label="1">发布</el-radio>
          <el-radio :label="0">不发布</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="播放地址:" prop="addr">
        <el-input v-model="formData.addr" ></el-input>
      </el-form-item>
      <el-form-item align="right">
        <el-button type="primary" @click="submit('formData')">确认</el-button>
        <el-button type="danger" @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import musicApi from '@/api/music';
import fileApi from "@/api/file";
export default {
  props:{
    id: null, // MV的id
    visiable:{  // 弹出窗口
      type:Boolean,
      default:false
    },
    remoteClose: Function, // 用于关闭窗口
  },

  data() {
    return {
      formData: {},
      allRegionList: [],
      allTypeList: [],
      rules: {
        mvName:[
          { required: true, message: '请输入MV名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        releaseTime:[
          { required: true, message: '请选择发行日期', trigger: 'change' }
        ],
        regionId:[
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        typeId:[
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        addr:[
          { required: true, message: '请输入播放地址', trigger: 'blur' }
        ],
        status:[
          {required: true, message: '请选择是否发布', trigger: 'change'}
        ],
      }
    }
  },

  watch: {
    // 监听visiable的变化 将改变之后的值传入
    visiable(val) {
      if(val) {
        this.fetchData();
        this.fetchType();
        this.fetchRegion();
      }
    },
  },

  methods: {
    // 查询MV详情
    fetchData() {
      musicApi.getMvById(this.id).then(response => {
        if (response.code === 200) {
          this.formData = response.data;
        }
      })
    },

    // 获取地区列表
    fetchRegion() {
      musicApi.getRegionList().then(response => {
        if (response.code === 200) {
          this.allRegionList = response.data;
        }
      })
    },

    // 获取类型列表
    fetchType() {
      musicApi.getTypeList().then(response => {
        if (response.code === 200) {
          this.allTypeList = response.data;
        }
      })
    },

    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicApi.updateMv(this.formData).then(response => {
            if (response.code === 200) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 1500
              });
            } else if (response.code === 306) {
              this.$notify.error({
                title: '错误',
                message: '您没有操作权限，请联系管理员',
                duration: 1500
              });
            } else {
              this.$notify.error({
                title: '错误',
                message: '系统异常，请稍后再试',
                duration: 1500
              });
            }
            this.handleClose();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 上传MV封面图
    uploadMainImg(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        // 将之前的图片删除
        // this.deleteImage();
        if(response.code === 200) {
          this.formData.mvImg = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 关闭窗口
    handleClose() {
      // 将表单清空
      this.$refs['formData'].resetFields();
      // 调用父组件的方法关闭窗口
      this.remoteClose();
    },
  }
}
</script>

<style scoped>

</style>
